<template>
    <div class="service_guarantee">
        <!-- <img
        class="close"
                src="../../assets/images/goodsDetails/叉@2x.png"
                alt=""
                @click="complete"
        />-->
        <p class="title">密马服务保障</p>
<!--        <div class="divider"></div>-->
        <!--  -->
        <div class="service_guarantee_info_box">
            <div class="service_guarantee_info" v-for="(item,index) in services" :key="index">
                <img
                        :src="item.support?require('../../assets/images/goodsDetails/编组备份@2x.png'):require('../../assets/images/goodsDetails/组 68@2x.png')"
                        alt
                />
                <span>{{item.service_name}}</span>
                <p>{{item.brief}}</p>
            </div>
        </div>
        <div class="self"></div>
        <div class="bottom" @click="complete">完成</div>
    </div>
</template>

<script>
  export default {
    props: {
      services: Array
    },
    methods: {
      complete() {
        this.$emit("complete", false);
      }
    }
  };
</script>
<style lang="scss" scoped>
    .service_guarantee {
        padding-bottom: 50;

        .self {
            position: relative;
            top: -35px;
            height: constant(safe-area-inset-bottom);
            height: env(safe-area-inset-bottom);
            background: #ffffff;
        }

        .close {
            height: 12px;
            width: 12px;
            position: absolute;
            top: 23px;
            right: 16px;
        }

        .title {
            line-height: 53px;
            font-size: 15px;
            font-weight: bold;
            color: rgba(60, 60, 60, 1);
            margin-left: 17px;
        }

        .divider {
            height: 0.5px;
            width: 351px;
            background: rgba(245, 245, 245, 1);
            margin: 0 auto;
        }

        .service_guarantee_info_box {
            height: 395px;
            overflow-y: scroll;
            padding-bottom: 60px;
        }

        .service_guarantee_info {
            margin-left: 17px;
            margin-top: 17px;

            .service_guarantee_info:not(:first-child) {
                margin-top: 24px;
            }

            img {
                height: 14px;
                width: 14px;
                vertical-align: unset;
            }

            span {
                font-size: 14px;
                color: rgba(102, 102, 102, 1);
                vertical-align: bottom;
                margin-left: 7px;
            }

            p {
                line-height: 20px;
                width: 304px;
                margin-top: 9px;
                font-size: 13px;
                color: rgba(102, 102, 102, 1);
                margin-left: 23px;
            }
        }

        .bottom {
            width: 350px;
            line-height: 38px;
            text-align: center;
            position: absolute;
            bottom: 17px;
            margin: 0 11px;
            height: 46px;
            background: #ffdd07;
            border-radius: 30px;
            color: rgba(47, 47, 47, 1);
            font-size: 14px;
            font-weight: bold;

            line-height: 46px;
            margin-bottom: constant(safe-area-inset-bottom);
            margin-bottom: env(safe-area-inset-bottom);
        }
    }
</style>
